<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="top">
        <div class="nav">
            <div class="logo"><img src="images/logo.png" alt=""></div>
            <ul>
                <li><a href="##">小米官网</a></li>
                <li><a href="##">小米商城</a></li>
                <li><a href="##">小米澎湃OS</a></li>
                <li><a href="##">小米汽车</a></li>
                <li><a href="##">小米影像</a></li>
                <li><a href="##">云服务</a></li>
                <li><a href="##">IOT</a></li>
                <li><a href="##">有品</a></li>
                <li><a href="##">小爱开放平台</a></li>
                <li><a href="##">Location</a></li>
            </ul>
            <div class="login">
                <a href="##">登录</a>
                <span>|</span>
                <a href="##">注册</a>
            </div>
            <!-- 移动端导航栏 -->
            <div class="m-login">
                <div class="iconfont icon-yonghu"></div>
                <div class="iconfont icon-liebiao2 list"></div>
            </div>
            <div class="m-menu">
                <div class="m-menu-links">
                    <a href="##">小米官网
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">小米商城
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">小米澎湃OS
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">小米汽车
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">小米影像
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">云服务
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">IOT
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">有品
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">小爱开放平台
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>
                <div class="m-menu-links">
                    <a href="##">Location
                        <div class="iconfont icon-youjiantou"></div>
                    </a>
                </div>


            </div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <div>
            <picture>
                <source media="(max-width:800px)" srcset="images/copy1.jpeg">
                <img src="images/img1.jpeg" alt="">
            </picture>

        </div>
        <div>
            <picture>
                <source media="(max-width:800px)" srcset="images/copy2.jpeg">
                <img src="images/img2.jpeg" alt="">
            </picture>
        </div>
        <div>
            <picture>
                <source media="(max-width:800px)" srcset="images/copy3.jpeg">
                <img src="images/img3.jpeg" alt="">
            </picture>
        </div>
        <div>
            <picture>
                <source media="(max-width:800px)" srcset="images/copy4.jpeg">
                <img src="images/img4.jpeg" alt="">
            </picture>
        </div>
        <div style="margin: 0;">
            <picture>
                <source media="(max-width:800px)" srcset="images/copy5.jpeg">
                <img src="images/img5.jpeg" alt="">
            </picture>
        </div>
        <div style="margin: 0;">
            <picture>
                <source media="(max-width:800px)" srcset="images/copy6.jpeg">
                <img src="images/img6.jpeg" alt="">
            </picture>
        </div>
        <div>
            <picture>
                <source media="(max-width:800px)" srcset="images/copy7.jpeg">
                <img src="images/img7.jpeg" alt="">
            </picture>
        </div>
        <div>
            <picture>
                <source media="(max-width:800px)" srcset="images/copy8.jpeg">
                <img src="images/img8.jpeg" alt="">
            </picture>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-links clearfix">
            <dl>
                <dt></dt>
            </dl>
            <dl>
                <dt>选购指南</dt>
                <dd><a href="##">手机</a></dd>
                <dd><a href="##">电视</a></dd>
                <dd><a href="##">笔记本</a></dd>
                <dd><a href="##">平板</a></dd>
                <dd><a href="##">穿戴</a></dd>
                <dd><a href="##">耳机</a></dd>
                <dd><a href="##">家电</a></dd>
                <dd><a href="##">路由器</a></dd>
                <dd><a href="##">音箱</a></dd>
                <dd><a href="##">配件</a></dd>
            </dl>
            <dl>
                <dt>服务中心</dt>
                <dd><a href="##">申请售后</a></dd>
                <dd><a href="##">售后政策</a></dd>
                <dd><a href="##">维修服务价格</a></dd>
                <dd><a href="##">订单查询</a></dd>
                <dd><a href="##">以旧换新</a></dd>
                <dd><a href="##">保障服务</a></dd>
                <dd><a href="##">防伪查询</a></dd>
                <dd><a href="##">F码通道</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="##">小米之家</a></dd>
                <dd><a href="##">服务网点</a></dd>
                <dd><a href="##">授权体验店/专区</a></dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd><a href="##">了解小米</a></dd>
                <dd><a href="##">加入小米</a></dd>
                <dd><a href="##">投资者关系</a></dd>
                <dd><a href="##">可持续发展</a></dd>
                <dd><a href="##">廉洁举报</a></dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd><a href="##">新浪微博</a></dd>
                <dd><a href="##">官方微信</a></dd>
                <dd><a href="##">联系我们</a></dd>
                <dd><a href="##">公益基金会</a></dd>
            </dl>
            <div class="contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00(仅收市话费)</p>
                <a href="##" class="iconfont icon-kefu">
                    人工客服
                </a>

            </div>
        </div>
        <div class="slogan">
            <div>
            </div>
        </div>

    </div>
    <div class="m-footer">
        <a href="https://www.mi.com/about">
            了解小米
            <div class="iconfont icon-youjiantou">
            </div>
        </a>

    </div>

</body>

<script>
    //滑动滚动条改变顶部背景颜色
    //获取导航区域
    var nav = document.querySelector(".top");
    var navHeight = nav.offsetHeight;
    //滚动条事件
    window.onscroll = function () {
        var opacity = 0;
        //获取滚动条距离
        var range = document.body.scrollTop || document.documentElement.scrollTop;
        if (range < navHeight) {
            opacity = range / navHeight;
            nav.style.backgroundColor = "rgba(0,0,0," + opacity + ")";
        }
    }
    //移动端导航点击显示
    //获取单击按钮
    var list = document.querySelector(".list");
    //获取导航元素
    var m_menu = document.querySelector(".m-menu");
    list.onclick = function () {
        if (list.classList.contains("icon-liebiao2")) {
            m_menu.style.opacity = "100";
            m_menu.style.zIndex = "99";

            list.classList.remove("icon-liebiao2" );
            list.classList.add("icon-Xhao");
        }else if(list.className = "iconfont icon-Xhao"){ 
            m_menu.style.opacity = "0";
            m_menu.style.zIndex = "0";

            list.classList.remove("icon-Xhao" );
            list.classList.add("icon-liebiao2");

        }


        // var close = document.querySelector(".icon-Xhao");
        // close.onclick = function () {
           
        // }


    }






</script>

</html>
